<template>
	<view class="page-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<!-- 头像和操作按钮 -->
			<view class="avatar-section">
				<view class="user-header">
					<image class="avatar" :src="user.avatarUrl" mode="aspectFill"></image>
				</view>
				<view class="user-actions" v-if="!isCurrentUser">
					<text v-if="!user.isFollowed" class="follow-btn" @click="collectUser(user.userId)">关注</text>
					<text class="message-btn" @click="goToChatRoom(user.userId)">💬</text>
				</view>
				<view class="user-actions" v-else>
					<text class="edit-btn" @click="goToProfileEdit">编辑资料</text>
				</view>
			</view>

			<!-- 用户基本信息 -->
			<view class="user-info">
				<view class="user-name">{{ user.nickname }}</view>
				<view class="desc" @click="changeDescFlg(!openFlg)">
					<view class="user-desc" v-if="user.personalProfile" :style="
              'text-overflow: ' +
              user_desc_style.text_overflow +
              '; overflow: ' +
              user_desc_style.overflow +
              '; white-space: ' +
              user_desc_style.white_space +
              ';'
            ">
						{{ user.personalProfile }}
					</view>
					<view class="user-desc" v-else :style="
              'text-overflow: ' +
              user_desc_style.text_overflow +
              '; overflow: ' +
              user_desc_style.overflow +
              '; white-space: ' +
              user_desc_style.white_space +
              ';'
            ">
						此人很懒，什么都没有写
					</view>
					<image v-if="openFlg" src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/up.png"
						mode="aspectFit" />
					<image v-else src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/down.png"
						mode="aspectFit" />
				</view>
				<view class="user-id" v-if="openFlg">ID:{{ user.createType }}_{{ user.userId }}</view>

				<!-- 关注和粉丝 -->
				<view class="follow-info">
					<text class="number">{{ user.followedCount }}</text>
					<text v-if="!isCurrentUser">关注TA的</text>
					<text v-else>关注我的</text>
					<text class="number" style="margin-left: 10px">{{
            user.followerCount
          }}</text>
					<text v-if="!isCurrentUser">TA关注的</text>
					<text v-else>我关注的</text>
				</view>

				<!-- 地区和IP地址 -->
				<view class="location-info">
					<view v-if="user.province">现居<text
							style="font-weight: bolder; color: black;">{{ user.province }}</text></view>
					<view>IP 属地：{{ user.ipProvince }}</view>
				</view>

				<!-- 个人成就 -->
				<view class="achievements">
					<view class="achievement-item">

						<text>码龄{{ user.regYear }}年</text>
					</view>
					<view class="achievement-item">
						<text>原力等级 {{ user.forceLevel }} · 总分{{ user.totalScore }} · 当月{{ user.monthlyScore }}</text>
					</view>
				</view>

				<!-- 作品统计 -->
				<view class="stats-section">
					<text class="stat-item">{{ user.articlesCount }} 原创文章 · </text>
					<text class="stat-item">{{ user.likesCount }} 点赞 · </text>
					<text class="stat-item">{{ user.commentsCount }} 评论 · </text>
					<text class="stat-item">{{ user.followingCount }} 收藏</text>
				</view>

				<!-- 兴趣标签 -->
				<view class="interests" v-if="user.isInterestedName && user.isInterestedName.length > 0">
					<view class="interest-tag" v-for="(item, index) in user.isInterestedName" :key="index"
						@click="search(item)">{{ item }}</view>
				</view>
			</view>
		</view>

		<!-- 内容分类导航 -->
		<view class="content-tabs">
			<scroll-view :scroll-x="true" class="tab-scroll" :scroll-left="scrollLeft">
				<view :class="'tab-item ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="swichNav">最近
				</view>
				<view :class="'tab-item ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="swichNav">博客
				</view>
				<view :class="'tab-item ' + (currentTab == 2 ? 'active' : '')" data-current="2" @tap="swichNav">资源
				</view>
				<view :class="'tab-item ' + (currentTab == 3 ? 'active' : '')" data-current="3" @tap="swichNav">动态
				</view>
				<view :class="'tab-item ' + (currentTab == 4 ? 'active' : '')" data-current="4" @tap="swichNav">专栏
				</view>
				<view :class="'tab-item ' + (currentTab == 5 ? 'active' : '')" data-current="5" @tap="swichNav">视频
				</view>
				<view :class="'tab-item ' + (currentTab == 6 ? 'active' : '')" data-current="6" @tap="swichNav">问答
				</view>
				<view :class="'tab-item ' + (currentTab == 7 ? 'active' : '')" data-current="7" @tap="swichNav">更多
				</view>
				<view class="search-btn" @tap="goToSearch">
					<text>🔍</text>
				</view>
			</scroll-view>
		</view>

		<!-- 内容列表 -->
		<view class="content-container">
			<!-- 博客列表 -->
			<view class="article-item" v-for="(item, index) in dataList" :key="index">
				<navigator :url="'/pages/article/article?articleId=' + item.articleId" hover-class="none">
					<!-- 文章内容 -->
					<view class="article-content">
						<view class="article-title">{{ item.title }}</view>
						<view class="article-preview">
							<image v-if="item.coverUrl" :src="item.coverUrl" mode="aspectFill" class="article-cover">
							</image>
						</view>
					</view>

					<!-- 文章元信息 -->
					<view class="article-meta">
						<view class="article-stats">
							<text>{{ item.updateTime }}</text>
							<text>{{ item.readCount }}阅读</text>
							<text>{{ item.commentCount }}评论</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/user/user.js
	import {
		getUserDetail
	} from "@/api/user";

	export default {
		data() {
			return {
				user: {},
				dataList: [],
				isCurrentUser: false,
				openFlg: false,
				user_desc_style: {
					text_overflow: "ellipsis",
					overflow: "hidden",
					white_space: "nowrap",
				},
				winHeight: "",
				currentTab: 0,
				scrollLeft: 0,
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
			// 高度自适应
			uni.getSystemSetting({
				success: function(res) {
					var clientHeight = res.windowHeight;
					var clientWidth = res.windowWidth;
					var rpxR = 750 / clientWidth;
					var calc = clientHeight * rpxR - 180;
					that.winHeight = calc;
				},
			});

			// 获取用户信息
			this.getUserDetail(options.userId);
		},

		onShow() {
			// 页面显示时再次检查
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const options = currentPage.options;
			if (options.userId) {
				this.getUserDetail(options.userId);
			}
		},
		methods: {
			/**
			 * 展开或关闭描述
			 */
			changeDescFlg(openFlg) {
				if (openFlg) {
					this.openFlg = openFlg;
					this.user_desc_style.text_overflow = "clip";
					this.user_desc_style.overflow = "visible";
					this.user_desc_style.white_space = "normal";
				} else {
					this.openFlg = openFlg;
					this.user_desc_style.text_overflow = "ellipsis";
					this.user_desc_style.overflow = "hidden";
					this.user_desc_style.white_space = "nowrap";
				}
			},

			// 滚动切换标签样式
			switchTab(e) {
				this.currentTab = e.detail.current;
				this.checkCor();
			},

			// 点击标题切换当前页时改变样式
			swichNav(e) {
				var cur = e.target.dataset.current;
				if (this.currentTaB == cur) {
					return false;
				} else {
					this.currentTab = cur;
				}
			},

			// 跳转到搜索页面
			goToSearch() {
				uni.navigateTo({
					url: "/pages/search/search",
				});
			},

			search(value) {
				uni.navigateTo({
					url: "/pages/search/search?keyword=" + value,
				});
			},

			/**
			 * 关注用户
			 */
			collectUser(authorid) {
				this.user.isFollowed = true;
				// 这里可以添加实际的关注API调用
				uni.showToast({
					title: "关注成功",
					icon: "success",
				});
			},

			// 跳转到聊天室
			goToChatRoom(userId) {
				// 这里可以添加跳转到聊天室的逻辑
				uni.navigateTo({
					url: "/pages/message/message?messageId=" + userId,
				});
			},

			// 跳转到编辑资料页面
			goToProfileEdit() {
				uni.navigateTo({
					url: "/pages/profile-edit/profile-edit",
				});
			},

			// 获取用户信息
			async getUserDetail(userId) {
				try {
					const data = await getUserDetail(userId);
					
					if (data.code === 0) {
						this.user = data.data;
						
						// 从本地存储获取当前登录用户信息
						const userInfo = uni.getStorageSync("userInfo");
						if (userInfo) {
							const currentUser = JSON.parse(userInfo);
							this.isCurrentUser = currentUser.userId == userId;
						}else{
							this.isCurrentUser = false;
						}
					}else{
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
					// 请求失败，也清除token
					this.handleTokenInvalid();
				}
			}
		},
	};
</script>
<style>
	@import "./user.scss";
</style>